<template>
    <div>
      <!-- 面包屑 -->
      <Breadcrumb title1="权限管理" title2="权限列表" class="container"/>
      <el-card class="box-card">
        <!-- 权限列表 -->
        <el-table
          :data="PowersList"
          style="width: 100%"
          border
          header-align="center"
        >
          <el-table-column align="center" label="ID" width="50" type="index" />
          <el-table-column
            label="权限名称"
            align="center"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.authName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="路径"
            align="center"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.path }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="权限等级"
            align="center"
          >
            <template slot-scope="scope">
              <el-button size="mini" :type="getColor(scope.row.level)" plain round>{{ levelList[scope.row.level] }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { getPowerList } from '@/api/power'
export default {
  name: 'RightsList',
  components: {
    Breadcrumb
  },
  data () {
    return {
      PowersList: [],
      levelList: {
        0: '一级',
        1: '二级',
        2: '三级'
      }
    }
  },
  created () {
    this.getPowersList()
  },
  methods: {
    async getPowersList () {
      try {
        //  list 列表显示权限
        const { data } = await getPowerList('list')
        this.PowersList = data
      } catch (error) {
        console.log(error)
      }
    },
    // 根据权限等级返回不同的颜色
    getColor (lever) {
      return lever === '0' ? 'primary' : lever === '1' ? 'success' : 'warning'
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}
</style>
